<template>
	<view class="f26r col333">
		<navbar background="background-image: linear-gradient(to right, #2c6739, #99c043);"
			title="登录/注册"
		></navbar>
		<view class="f28r foWeiBold teAliCenter pt100r pb50r">
			登录后您可以进行以下操作：
		</view>
		<view class="w400r mAuto col999 pb70r">
			<view class="wPer50 disInBlo">
				<text class="col2c6739">
					●
				</text>
				在线预订
			</view>
			<view class="wPer50 disInBlo">
				<text class="col2c6739">
					●
				</text>
				预订信息查询
			</view>
		</view>
		<!-- <view class="w650r mAuto backCol2c6739 teAliCenter colFff f30r borRad10r lh80r"
			 @click="cliLoginBtn"
		>
			微信用户一键登录
		</view> -->
		<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
			class="w650r mAuto backCol2c6739 teAliCenter colFff f30r borRad10r lh80r"
		>
			手机号授权登录
		</button>
		<view class="w650r mAuto teAliCenter col999 mt40r" @click="notLogin"
			v-if="!optionScene"
		>
			暂不登录，我先逛逛
		</view>
		<view class="w650r mAuto teAliCenter col99c043 mt40r"
			v-if="optionScene"
		>
			邀请码： {{optionScene}}
		</view>
		<!-- {{optionStr}} -->
		<view class="poFixed wPer100 hPer100 backCol0a0a0aS5 zIndex1 top0 left0" v-show="hANFrame">
			<view class="poFixed top50P left50P trTrn50Pn50P backColWhite borRad10r w700r bSha0010u0rgb00001">
				<view class="lh100r poRel foWeiBold f30r teAliCenter borB1SE8e8e8">
					新用户登录
				</view>
				<view class="pl20r pr20r pb20r boSiBorBox borRad10r">
					<view class="disFlex borB1SE8e8e8 pt20r pb20r">
						<view class="w160r teAliRight lh120r borR1SE8e8e8">
							修改头像：
						</view>
						<view class="flex1 poRel">
							<button class="w120r h120r mAuto notBtnSty p0"
								open-type="chooseAvatar" @chooseavatar="cliPhotographWhite"
							>
								<image :src="headImg"
								 class="wPer100 hPer100 borRad50P" mode="aspectFit"
								></image>
							</button>
							<view
								class="poAbs bom0 left50P trTrX10r backCol0a0a0aS3 borRad50P w50r h50r teAliCenter boSiBorBox pt4r p0 lhNormal"
							>
								<image :src="baseUrl + 'iconPhotographWhite.png'" mode="aspectFit"
									class="w40r h40r disInBlo"
								></image>
							</view>
						</view>
					</view>
					<view class="disFlex aliItCenter borB1SE8e8e8 pt20r pb20r">
						<view class="w160r teAliRight lh80r borR1SE8e8e8">
							修改昵称：
						</view>
						<view class="flex1 pl20r">
							<input type="nickname" :value="nickName" @input="bindinput"
								@blur="bindblur" placeholder="请输入昵称"
								class="bor1SE8e8e8 h80r lh80r borRad10r pl20r pr20r f26r"
							/>
						</view>
						<!-- <view class="w160r teAliRight">
							<button class="f26r colFff backCol99c043 w140r notBtnSty p0"
								@click="subName"
							>
								提交昵称
							</button>
						</view> -->
					</view>
					<button class="lh80r backImgLiGrTR2c6739a99c043 borRad10r f26r colFff mt30r"
						@click="subName"
					>
						确认并登录
					</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import navbar from '@/components/navbar.vue'
import { xcxAuthCode2Session, getWxPhone, bindAvatarName } from '@/utils/api.js'
import { baseUrl } from '@/utils/request.js'
export default {
	components: { navbar },
	data() {
		return {
			baseUrl,
			optionStr: '',
			optionScene: '',//1EAHNI
			optionType: '',
			
			hANFrame: false,
			headImg: baseUrl + 'iconHeadPortrait.png',
			nickName: '',
			
		}
	},
	onLoad(options) {
		this.optionStr = JSON.stringify(options)
		if(options.scene) {
			this.optionScene = options.scene;
			this.optionType = 1;
		}
		if(options.type) this.optionType = options.type;
	},
	onShareAppMessage(res) {//分享给好友
	    if (res.from === 'button') {// 来自页面内分享按钮
	        console.log(res.target)
	    }
	    return {
	        title: '山雀壹®共享茶室', //分享的名称
			imageUrl: '/static/images/logo.png',
	        path: '/pages/personalCenter/login',
	        mpId: 'wxf8003ea15566ecd1' //此处配置微信小程序的AppId
	    }
	},
	onShareTimeline(res) {//分享到朋友圈
	    return {
	        title: '山雀壹®共享茶室',
	        type: 0,
	        summary: "",
	    }
	},
	methods: {
		getPhoneNumber(eee) {
			uni.showLoading({ title: '登录中...' })
			uni.login({
				provider: 'weixin',
				success: res1 => {
					// uni.showModal({
					// 	title: 'scene',
					// 	content: this.optionScene,
					// 	success:rrr => {
					// 		if (res1.confirm) {console.log(11)}
					// 	}
					// })
					xcxAuthCode2Session({
						js_code: res1.code,
						invitation_code: (this.optionScene ? this.optionScene : '')
					}).then(res2 => {
						// console.log('xcxAuthCode2Session', res2)
						// return;
						uni.setStorage({
							key: 'token', data: res2.data.token,
							success:res3 => {
								if(eee.detail.errMsg == "getPhoneNumber:ok") {
									getWxPhone({
										token: res2.data.token,
										js_code: eee.detail.code
									}).then(res4 => {
										if(res4.code == '000000') {
											let newObj = res2.data;
											newObj.phone = res4.data.phone;
											uni.setStorage({
												key: 'userInfo',
												data: newObj,
												success:res5 => {
													uni.hideLoading();
													if(res2.data.is_new && res2.data.is_new == 1) {
														this.headAndNickName();
													}else {
														if(this.optionScene) {
															uni.switchTab({ url: '/pages/personalCenter/index'})
														}else {
															uni.navigateBack();
														}
													}
												}
											})
										}else {
											uni.setStorage({
												key: 'userInfo',
												data: res2.data,
												success:res5 => {
													uni.hideLoading();
													if(res2.data.is_new && res2.data.is_new == 1) {
														this.headAndNickName();
													}else {
														if(this.optionScene) {
															uni.switchTab({ url: '/pages/personalCenter/index'})
														}else {
															uni.navigateBack();
														}
													}
												}
											})
										}
									})
								}else {
									uni.setStorage({
										key: 'userInfo', data: res2.data,
										success:res4 => {
											uni.hideLoading();
											if(res2.data.is_new && res2.data.is_new == 1) {
												this.headAndNickName();
											}else {
												if(this.optionScene) {
													uni.switchTab({ url: '/pages/personalCenter/index'})
												}else {
													uni.navigateBack();
												}
											}
										}
									})
								}
							}
						})
					})
				}
			})
		},
		notLogin() {
			if(this.optionType == 1) {
				uni.switchTab({ url: '/pages/personalCenter/index'})
			}else {
				uni.navigateBack()
			}
		},
		headAndNickName() {
			this.nickName = uni.getStorageSync('userInfo').nickname;
			this.hANFrame = true;
		},
		cliPhotographWhite(eee) {
			wx.getFileSystemManager().readFile({
				filePath: eee.detail.avatarUrl, encoding: "base64",
				success: res1 => {
					bindAvatarName({
						token: uni.getStorageSync('token'),
						avatar_url: 'data:image/jpeg;base64,' + res1.data
					}).then(res2 => {
						this.headImg = eee.detail.avatarUrl;
						uni.showToast({
							title: '头像修改成功', duration: 3000
						})
					})
				}
			})
		},
		bindblur(eee) {//失去焦点
			this.nickName = eee.detail.value; // 获取微信昵称
		},
		bindinput(eee) {//输入框的值变化
			this.nickName = eee.detail.value;
		},
		subName() {
			bindAvatarName({
				token: uni.getStorageSync('token'),
				nickname: this.nickName
			}).then(res1 => {
				// uni.showToast({
				// 	title: '昵称修改成功', duration: 3000
				// })
				if(this.optionScene) {
					uni.switchTab({ url: '/pages/personalCenter/index'})
				}else {
					uni.navigateBack();
				}
			})
		},
	}
}
</script>
<style>
page {background-color: white;}
</style>